<template>
	<Layout :class="'bg-white p-2'">
		<h1>预约接待列表</h1>
		<Row :class="'m-1'" justify="start">
			<!--表头-->
			<Input :class="'w-25 m-2'" v-model="des" placeholder="请输入回访情况" />
			<Input :class="'w-25 m-2'" v-model="result" placeholder="请输入回访结果" />
			<Input :class="'w-25 m-2'" v-model="method" placeholder="请输入回访方式" />
			<Input :class="'w-25 m-2'" v-model="autor" placeholder="请输入跟进人" />
			<Input :class="'w-25 m-2'" v-model="cu" placeholder="请输入添加人" />
			<Input :class="'w-25 m-2'" v-model="source" placeholder="请输入线索来源" />
			<Input :class="'w-25 m-2'" v-model="name" placeholder="请输入学生姓名" />
			<Input :class="'w-25 m-2'" v-model="tel" placeholder="请输入联系电话" />
		</Row>
		<Row>
			&nbsp;&nbsp;&nbsp;接待时间区间
		</Row>

		<Row :class="'m-1'">
			<Col span="12">
			&nbsp;&nbsp;<DatePicker :class="'w-20'" type="date" v-model="interviewDate1" format="yyyy-MM-dd"
				placement="bottom-end" placeholder="接待时间日期" style="width: 200px"></DatePicker>
			</Col>
			<Col span="12">
			&nbsp;&nbsp;<DatePicker :class="'w-20'" type="date" v-model="interviewDate2" format="yyyy-MM-dd"
				placement="bottom-end" placeholder="接待时间日期" style="width: 200px"></DatePicker>
			</Col>

		</Row>
		<Row :class="'m-1'">
			<Col span="12">
			&nbsp;&nbsp;<TimePicker :class="'w-20'" type="time" v-model="interviewClock1" format="HH:mm:ss"
				placeholder="接待时间时刻" style="width: 168px"></TimePicker>
			</Col>
			<Col span="12">
			&nbsp;&nbsp;<TimePicker :class="'w-20'" type="time" v-model="interviewClock2" format="HH:mm:ss"
				placeholder="接待时间时刻" style="width: 168px"></TimePicker>
			</Col>

			<br>
			<!--查询按钮-->
			<Button class="m-2"  type="primary" shape="circle" @click="search" icon="ios-search">查询</Button>
		</Row>

		</Row>

		<Layout :class="'bg-white'">
			<Table border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
				<template slot-scope="{ row, index }" slot="status">
					<span v-if="row.statu">开</span>
					<span v-else>关</span>
				</template>
				<template slot-scope="{ row, index }" slot="action">
										
			
				<Row>
					<Col>
					<Menu >
						<Submenu name="1">
							<template slot="title">
								<Icon type="ios-paper" />
								操作选项
							</template>
							<Button type="error" size="small" @click="remove()">删除</Button>
							<br>
							<Button type="primary" size="small" style="margin-right: 5px"
								@click="show(row)">详细</Button>
							<br>
							<Button type="error" @click="newReservationInterview(row)">新增预约接待记录</Button>
						</Submenu>
					</Menu>
					</Col>
				</Row>
				
				
				</template>
			</Table>
			<!--分页-->
			<Page :class="'m-2 text-right'" :page-size="tableInfo.pageSize" @on-change="pageSearch"
				:total="tableInfo.total" />
		</Layout>

	</Layout>
</template>

<script>
export default {
  data() {
    return {
      des: "",
      result: "",
      method: "",
      autor: null,
      cu: null,
      source: "",
      name: "",
      tel: "",
      interviewClock1: "",
      interviewClock2: "",
      interviewDate1: "",
      interviewDate2: "",
      tableInfo: {
        currentPage: 1,
        total: 10,
        pageSize: 10,
        columnInfo: [
          //表头-----------------------------------
          {
            title: "学生编号",
            key: "studentId",
          },
          {
            title: "预约接待时间",
            key: "datetime",
          },
          {
            title: "接待人",
            key: "autor",
          },

          {
            title: "操作",
            slot: "action",
            width: 150,
          },
        ],
        data: [],
      },
    };
  },
  methods: {
    init: function () {
      this.$data.tableInfo.currentPage = 0;
      this.search();
    },
    newReservationInterview: function (row) {
      this.$router.push({
        name: "reservationInterview_new", //跳转至XX新增页面
        params: {
          row,
        },
      });
    },
    show: function (pId) {
      this.$router.push({
        name: "reservationInterview_detail", //跳转至XX详细页面
        params: {},
      });
    },
    pageSearch: function (changedPage) {
      this.$data.tableInfo.currentPage = changedPage;
      this.search();
    },
    remove: function (pId) {
      this.message.confirm({
        title: "删除提示",
        content: "即将删除权限，确定吗？",
        onOk: () => {
          this.http
            .delete({
              url: "/backview/delete", //删除url 待定......
              param: {},
            })
            .then((data) => {
              this.search();
            });
        },
        onCancel: () => {
          this.message.info("操作已取消");
        },
      });
    },
    formatDate: function (date) {
      //格式化日期方法!
      var d = new Date(date),
        month = "" + (d.getMonth() + 1),
        day = "" + d.getDate(),
        year = d.getFullYear();

      if (month.length < 2) month = "0" + month;
      if (day.length < 2) day = "0" + day;

      return [year, month, day].join("-");
    },
  }, //method
  created: function () {
    this.init();
  },
};
</script>

<style>
</style>
